<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <link href="./css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <style>
        .t1 {
            margin-top: 20px;
            margin-left: 10px;
            font-size: 14px;
            width: 100%;
        }

        td, th {
            width: 15%;
            text-align: center;
        }

        .form-group .form-control {
            width: 173px !important;
        }

        .btn_search {
            margin-left: 20px;
        }

        .div_pagination {
            padding-left: 10px;
        }
    </style>
</head>
<body>

<div class="panel panel-default">
    <div class="panel-heading">权限列表</div>
    <div class="panel-body">

        <form id="myForm" class="form-inline input-sm" name="form1"
              action="${pageContext.request.contextPath}/user_add2.jsp" method="post" autocomplete="off">
            <div class="form-group">
                <label for="roleId">角色</label>
                <select class="form-control input-sm" name="roleId" id="roleId">
                    <c:forEach var="role" items="${requestScope.roleList}">
                        <option value="${role.roleId}">${role.roleName}</option>
                    </c:forEach>
                </select>
            </div>
            <button id="btn" type="button" class="btn btn-primary input-sm btn_search ">添加</button>
        </form>
        <!-- 表格数据 -->
        <table class="table table-bordered table-hover t1">
            <thead>
            <tr>
                <th>序号</th>
                <th>权限名称</th>
                <th>一级菜单</th>
                <th>所属人数</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="roleInfo" items="${requestScope.roleList}" varStatus="i">
                <tr>
                    <td>${i.count}</td>
                    <td>${roleInfo.roleName}</td>
                    <td>
                        <select name="menuUrl" id="menuUrl">
                            <c:if test="${roleInfo.roleId == 1}">
                                <c:if test="${requestScope.roleMenuList.size()==0}">
                                    <option value="0">无菜单</option>
                                </c:if>

                                <c:if test="${requestScope.roleMenuList.size()>0}">
                                    <c:forEach items="${requestScope.roleMenuList}" var="roleMenu">
                                        <option value="${roleMenu.menuId}">${roleMenu.menuName}</option>
                                    </c:forEach>
                                </c:if>
                            </c:if>

                            <c:if test="${roleInfo.roleId == 2}">
                                <c:if test="${requestScope.empMenuList.size()==0}">
                                    <option value="0">无菜单</option>
                                </c:if>

                                <c:if test="${requestScope.empMenuList.size()>0}">
                                    <c:forEach items="${requestScope.empMenuList}" var="empMenu">
                                        <option value="${empMenu.menuId}">${empMenu.menuName}</option>
                                    </c:forEach>
                                </c:if>
                            </c:if>

                            <c:if test="${roleInfo.roleId == 3}">
                                <c:if test="${requestScope.userMenuList.size()==0}">
                                    <option value="0">无菜单</option>
                                </c:if>

                                <c:if test="${requestScope.userMenuList.size()>0}">
                                    <c:forEach items="${requestScope.userMenuList}" var="userMenu">
                                        <option value="${userMenu.menuId}">${userMenu.menuName}</option>
                                    </c:forEach>
                                </c:if>
                            </c:if>
                        </select>
                    </td>
                    <td>${roleInfo.userCount}</td>
                    <td>
                        <a href="${pageContext.request.contextPath}/role?type=roleInfo" type="button" class="btn  btn-warning">添加一级菜单</a>

                        <a onclick="detail(${roleInfo.roleId})" type="button" class="btn  btn-warning">菜单详情</a>

<%--                        <a href="${pageContext.request.contextPath}/role?type=menuDetail&roleId=${roleInfo.roleId}"--%>
<%--                           type="button" class="btn  btn-warning">菜单详情</a>--%>

<%--                        <a href="${pageContext.request.contextPath}/role?type=detail&roleId=${roleInfo.roleId}"--%>
<%--                           type="button" class="btn  btn-warning">人员详情</a>--%>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>

    </div>
</div>

<script>
    let detail = function (roleId) {
        let info = prompt("请输入 '菜单' | '用户' 来选择");
        if (info === "菜单") {
            window.location.href = "${pageContext.request.contextPath}/role?type=menuDetail&roleId=" + roleId;
        } else if (info === "用户") {
            window.location.href = "${pageContext.request.contextPath}/role?type=detail&roleId=" + roleId;
        } else {
            alert("请输入正确信息！");
        }
    }

    let myForm = $("#myForm");
    let btn = $("#btn");
    let roleId = $("#roleId");
    btn.on("click", function () {
        if (window.confirm("您真的要向序号为 [" + roleId.val() + "] 的角色中添加用户么？")) {
            myForm.submit();
        }

    });
</script>

</body>
</html>
